
//会议室使用率统计图表的配置项和数据
var option1 = {
	xAxis : {
		type : 'time',
		interval : 3600 * 24 * 1000
	},
	tooltip : {
		trigger : 'axis',
		axisPointer : {
			animation : false
		}
	},
	yAxis : {
		type : 'value',
		name : '使用率',
		axisLabel : {
			formatter : '{value}%'
		}
	},
	series : [ {
		type : 'line',
		smooth : true,
		data : [ [ '2017/08/01', 20 ], [ '2017/08/03', 32 ], [ '2017/08/04', 20 ], [ '2017/08/05', 40 ] ]
	} ]
};
// 预订时间段分布图
var option2 = {
	color : [ '#3398DB' ],
	tooltip : {
		trigger : 'axis',
		axisPointer : { // 坐标轴指示器，坐标轴触发有效
			type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
		}
	},
	xAxis : [ {
		type : 'category',
		data : [ '8:00','9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00' ],
		axisTick : {
			alignWithLabel : true
		}
	} ],
	yAxis : [ {
		type : 'value'
	} ],
	series : [ {
		name : '直接访问',
		type : 'bar',
		barWidth : '60%',
		data : [ 10,0, 52, 200, 334, 390, 330, 220 ]
	} ]
};
/* 预定会议时长分布饼图 */
var option3 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label:{
            	normal:{
            		formatter: '{b}：{d}%'
            	}
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

var paramsUsageRate = {// 会议室使用统计查询参数
	projectId : $("#projectId", top.document).val()
};
$(function() {
	layui.use([ 'form', 'laydate' ], function() {
		var laydate = layui.laydate, form = layui.form;

		// 初始化分店下拉
		initFormSelectsExt({// 分店ffff
			id : "project",
			url : '/app/customerInfo/getProjectJson',
			defaultValue : paramsUsageRate.projectId,
			first : "*" // 代表没有默认提示项
		});

		laydate.render({
			elem : 'input.usageRateDate', // 指定元素
			// value: staDate+' ~ '+endDate,
			range : '~',
			done : function(value, date, endDate) {
				var rangeDate = value.split(' ~ ');
				paramsUsageRate.staDate = rangeDate[0];
				paramsUsageRate.endDate = rangeDate[1];
				initChart1();
			}
		});
		form.on('select(dateTl)', function(data) {
			$("input.usageRateDate").val("");
			var now = new Date();
			// 以当前时间为结束时间 计算区间
			var endDate = now.format('yyyy-MM-dd');
			now.setMonth(now.getMonth() - data.value);
			var staDate = now.format('yyyy-MM-dd');

			paramsUsageRate.staDate = staDate;
			paramsUsageRate.endDate = endDate;
			initChart1();
		});
		form.on('select(project)', function(data) {
			paramsUsageRate.projectId = data.value;
			initChart1();
		});
	});
	// 初始化各个图表
	// 会议室使用率统计
	initChart1();
	initChart2();
	initChart3();
});
function initChart1() {
	var myChart1 = echarts.init(document.getElementById('usageRate'));
	$.post("/app/statistical/roomUsageRate", {
		params : paramsUsageRate
	}, function(data) {
		option1.series[0].data = convDouArray(data);
		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option1);
	});
}

/* 预定时间段分布图 */
function initChart2() {
	var myChart2 = echarts.init(document.getElementById('reservationRime'));
	$.post("/app/statistical/reservationRime", {
		params : paramsUsageRate
	}, function(data) {//data.x：x轴的时间，时间并不连续；data.y：y轴的数据
		var arr = reservationRimeP(data);
		option2.series[0].data = arr.y;
		option2.xAxis[0].data=arr.x;
		// 使用刚指定的配置项和数据显示图表。
		myChart2.setOption(option2);
	});
}

function initChart3() {
	var myChart3 = echarts.init(document.getElementById('reservationRimeLen'));
	$.post("/app/statistical/reservationRimeLen", {
		params : paramsUsageRate
	}, function(data) {//data.x：x轴的时间，时间并不连续；data.y：y轴的数据
		option3.series[0].data = reservationRimeLenP(data);
		// 使用刚指定的配置项和数据显示图表。
		myChart3.setOption(option3);
	});
}

/**
 * 加工预定会议时长分布饼图 所需数据
 * @param data
 * @returns
 */
function reservationRimeLenP(data){
	var arr=new Array();
	arr.push({value:data.a,name:"0~30分钟"});
	arr.push({value:data.b,name:"30分钟~1小时"});
	arr.push({value:data.c,name:"1小时~2小时"});
	arr.push({value:data.d,name:"2小时以上"});
	return arr;
}

/**
 *  加工一下预定时间段分布图 所需数据,由于数据库统计出来的时间段不是连续的 所以将没有时间的部分补充上0 
 *  例如：8 1,9 2,10 5,14 4,15 2,18 2 补充后就是8 1,9 2,10 5,11 0,12 0,13 0,14 4,15 2,16 0,17 0,18 2
 */
function reservationRimeP(data){
	var arr={};
	var x=new Array();
	var y=new Array();
	for (var i = 0,sta=parseInt(data[0].x); i < data.length ; i++,sta++) {//从最小时间循环到最大时间，数据后台是排序返回的
		x.push(sta);
		if(data[i].x==sta){
			y.push(parseInt(data[i].y));
		}else{
			y.push(0);
			i--;
		}
	}
	arr.x=x;
	arr.y=y;
	return arr;
}

/* 将一维数组([{x:1,y:2},{x:1,y:2},{x:1,y:2}])转换成二维数组([[1,2],[1,2],[1,2]]) */
function convDouArray(data) {
	var array = new Array();
	for (var i = 0; i < data.length; i++) {
		array.push([ data[i].x, parseFloat(data[i].y) ]);
	}
	return array;
}